import { Descriptions as AntdDescriptions, Skeleton, DescriptionsProps as AntdDescriptionsProps } from 'antd'
import './index.less'
import React from 'react';
interface DescriptionsProps extends AntdDescriptionsProps {
    style?: React.CSSProperties;
    loading?: boolean,
    layout?: 'horizontal' | 'vertical';
    title?: string
    extra?: React.ReactNode
    items: any[]
    span?:number
    [key:string]:any
}
 const Descriptions = ({ layout = 'horizontal', extra, column, title, loading, items, style,...rest }: DescriptionsProps) => {
//  'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
    const _column = (typeof column !== 'undefined') ? column : {
        xxl: 3,
        xl: 2,
        lg: 2,
        md: 2,
        sm: 1,
        xs: 1,

    }
    console.log({_column})
    return <AntdDescriptions
        layout={layout}
        style={style}
        colon={layout === 'vertical' ? false : true}
        extra={extra}
        labelStyle={{ width: 100 }}
        column={_column} className={`descriptions-container descriptions-layout-${layout}`} title={title}>
        {items.map((item,index) => {
           
            return <AntdDescriptions.Item   key={item.name||item.label||index} {...item}>
                {loading ? <span className='descriptions-loading' /> : item.children}
            </AntdDescriptions.Item>
        })}
    </AntdDescriptions>
}
Descriptions.Group = function ({ children }: any) {
    return <div className='descriptions-group'>{children}</div>
}
  
export default Descriptions